<template>
  <div id="myChart" :style="{width: '400px', height: '300px'}"></div>
</template>

<script>
import * as echarts from 'echarts'
import {College} from '@/axios/api'
let metadata

export default {
  data () {
    return {
    }
  },
  mounted() {
    this.setup()
  },
  methods:{
    async setup () {
      metadata = await College().then(res => res.data)
      let myChart = echarts.init(document.getElementById('myChart'))
      myChart.setOption({
        color: [
          "#37a2da",
          "#32c5e9",
          "#9fe6b8",
          "#ffdb5c",
          "#ff9f7f",
          "#fb7293",
          "#e7bcf3",
          "#8378ea"
        ],
        title: {
          text: '各二级学院学生人数',
          textStyle: {
            color: 'white',
            fontSize: '15'
          },
          left: 'center',
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        toolbox: {
          show: true
        },
        calculable: true,
        legend: {
          orient: "horizontal",
          icon: "circle",
          bottom: 0,
          x: "center",
          data: ["畜牧兽医学院", "食品药品与大健康学院", "工程学院", "经济管理学院", "农学与园艺技术学院", "互联网技术学院"],
          textStyle: {
            color: "#fff"
          }
        },
        series: [
          {
            name: "学生人数",
            zoom: '1.5',
            type: "pie",
            radius: [10, 50],
            roseType: "area",
            center: ["50%", "40%"],
            data: metadata
          },
        ]
      })
    }
  }
};
</script>

<style lang="scss" scoped>
</style>

